<template>
  <div class="renew-container">
    <div class="renew-title">
      <div class="title">{{course_time_table.name}}</div>
      <div class="play-num">
        <van-icon name="bullhorn-o" size="0.34rem" color="#888" />
        <span class="play-num-text">{{course_time_table.onlinepers | toWan}}次</span>
      </div>
    </div>
    <div class="renew-banner">
      <img :src="baseUrl+(course_time_table.audio_img?course_time_table.audio_img:course_detail.thumb)" alt="">
      <div class="aplayer-content">
        <div ref="audioBox"></div>
        <div class="aplayer-bs" @click.stop="isShowBs=!isShowBs">×{{bsunmber}}
          <div class="aplayer-bs-top" :style="{display:(isShowBs?'block':'none')}"> 
            <div class="aplayer-bs-list" :class="bsunmber == item?'aplayer-bs-list-active':''" v-for="(item,index) in bsList" :key="index" @click.stop="audioSetBs(item)">{{item}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-group">
      <van-tabs v-model="active">
        <van-tab title="本课介绍"></van-tab>
        <van-tab title="学员笔记"></van-tab>
        <van-tab title="课程列表"></van-tab>
      </van-tabs>
    </div>
    <div v-show="active == 0">
      <img :src="baseUrl+course_time_table.daodu1" v-if="course_time_table.daodu1" width="100%">
      <div class="curriculum-js" v-html="course_time_table.daodu" v-else></div>
      <div class="curriculum-info">
        <div class="curriculum-details">
          <div class="curriculum-info-title">{{likes_total}}人赞赏过</div>
          <div class="curriculum-like-group" v-if="likes_total>0">
            <img :src="item.icon" alt="" @error="imgErr" v-for="(item, index) in likes" :key="index">
            <span v-if="likes_total>20">...</span>
          </div>
          <!-- <div style="padding:0.3rem 10%;">
            <van-button type="info" block round @click="likeShow=true">赞赏一个</van-button>
          </div> -->
        </div>
      </div>
    </div>
    <div class="tab-related" v-show="active == 1">
      <van-list loading-text="加载中" v-model="loading" :finished="finished" @load="noteAjaxMethod">
        <div class="tab-related-index-data" v-for="(item, index) in listData" :key="index">
          <div class="tab-related-index-data-lef">
            <img :src="item.icon" @error="imgErr">
          </div>
          <div class="tab-related-index-data-rig">
            <div class="tab-related-index-data-rig-top">
              <span class="name">{{item.nickname}}</span>
              <span class="time">{{item.time}}</span>
            </div>
            <div class="tab-related-index-data-rig-dow"><span>{{item.content}}</span></div>
          </div>
        </div>
      </van-list>
      <empty v-if="listData.length == 0"></empty>
    </div>
    <div v-show="active == 2" class="curriculum-lists">
      <van-cell is-link v-for="(item, index) in time_table" :key="index" @click="playClass(item)">
        <template #title>
          <van-tag type="success">第{{item.nub}}讲</van-tag>
          <span class="custom-title">{{item.name}}</span>
        </template>
      </van-cell>
    </div>
    <div style="height:70px;" v-if="active == 1"></div>
    <div class="bi-model-input">
      <van-field v-model="message" clearable placeholder="一起记点笔记吧">
        <template #button>
          <van-button size="small" @click="submit">发送</van-button>
        </template>
      </van-field>
    </div>
    <van-popup v-model="likeShow" closeable style="width:80%;" @close="likeClose">
      <div class="reward-model-group">
        <div class="reward-content">
          <div class="reward-title">
            <img :src="baseUrl+(course_time_table.audio_img?course_time_table.audio_img:course_detail.thumb)" alt="" class="reward-title-img">
            <div class="reward-title-name">{{course_time_table.name}}</div>
            <div class="reward-title-info">赞赏是一种美德</div>
          </div>
          <div class="reward-contents">
            <div class="reward-content-box">
              <div class="reward-content-item" v-for="(item, index) in like_price_list" :key="index" @click="likeMethod(item)">
                <div class="reward-content-bar">{{item}}元</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <wechat :callback="wxReadyOkMethod" :share-data="wxShareData" pageurl="/weChatApp/couPlayback"/>
    <div class="like-button-group" @click="likeShow=true">赞一个</div>
    <footers />
    <div style="height:1rem;"></div>
  </div>
</template>
<script>
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import {
  Tabs,
  Tab,
  Icon,
  GoodsAction,
  GoodsActionButton,
  Popup,
  Button,
  Field,
  CellGroup,
  Cell,
  List,
  Tag,
  RadioGroup,
  Radio,
} from "vant";
import { isNumber } from "lodash";
import utils from "@/utils/utils";
import user_img from "@/assets/img/user_img.png";

export default {
  name: "match",
  components: {
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [GoodsAction.name]: GoodsAction,
    [Button.name]: Button,
    [GoodsActionButton.name]: GoodsActionButton,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [List.name]: List,
    [Tag.name]: Tag,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      active: 0,
      show: false,
      wxReadyOk: false,
      likeShow: false,
      isShowBs: false,
      likePrice: "",
      bsunmber:1,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      kb_id: "",
      message: "",
      course_id: "",
      course_time_table: {},
      course_detail: {},
      query: {
        pageIndex: 1,
        pageSize: 10,
        kb_id: "",
      },
      loading: false,
      finished: true,
      isLoading: false,
      listData: [],
      likes: [],
      time_table: [],
      like_price_list: [],
      likes_total: 0,
      wxShareData: null,
      bsList:[0.5, 1, 1.5, 2,2.5,3]
    };
  },
  filters: {
    toWan(e) {
      if (!isNumber(Number(e))) return 0;
      if (e > 10000) {
        return (e / 10000).toFixed(2) + "万";
      }
      return e;
    },
    dateFormats(e) {
      if (!isNumber(Number(e))) return "";
      return utils.dateFormat(e);
    },
  },
  mounted() {
    this.course_id = this.$route.query.course_id; //课程id
    this.kb_id = this.$route.query.kb_id; //章节id
    this.query.kb_id = this.kb_id;
    this.initAjaxMethod();
    this.noteAjaxMethod();
    this.likeAjaxMethod();
  },
  methods: {
    imgErr(e) {
      e.target.src = user_img;
    },
    likeClose() {
      this.likePrice =
        this.like_price_list.length > 0 ? this.like_price_list[0] : "";
    },
    onloadVideo(audioList) {
      this.aplayer = new APlayer({
        container: this.$refs["audioBox"],
        fixed: false, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: false, // 开启自动播放
        audio: audioList,
        preload: "auto", // 自动预加载歌曲
        loop: "none", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: "list", //  播放模式，list列表播放, random随机播放
      });
    },
    playClass(item) {
      console.log("kais", item);
      this.course_time_table = item;
      if (this.aplayer) {
        this.aplayer.list.clear();
        this.aplayer.list.add({
          name: item.name, // 歌曲名称
          artist: item.tname, // 歌曲作者
          url: item.audio, // 歌曲url地址
          // cover: this.baseUrl + item.audio_img, // 歌曲封面
          theme: "#f7a39a", // 主题
        });
        this.aplayer.play();
      }
    },
    //列表加载
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_CURRICULUM_PLAY_DETAIL, {
          kb_id: this.kb_id,
          course_id: this.course_id,
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.course_time_table = res.course_time_table || {};
            this.course_detail = res.course_detail || {};
            this.time_table = Array.isArray(res.time_table)
              ? res.time_table
              : [];
            this.like_price_list = Array.isArray(res.like_price_list)
              ? res.like_price_list
              : [];
            this.likePrice =
              this.like_price_list.length > 0 ? this.like_price_list[0] : "";
            let audioList = [
              {
                name: res.course_time_table.name, // 歌曲名称
                artist: res.course_teacher.tname, // 歌曲作者
                url: res.course_time_table.audio, // 歌曲url地址
                // cover: this.baseUrl + res.course_time_table.audio_img, // 歌曲封面
                theme: "#f7a39a", // 主题
              },
            ];
            this.wxShareData = {
              title: res.course_time_table.name, // 分享标题
              desc: res.course_detail.name+' | 【第'+res.course_time_table.nub+'讲】', // 分享描述
              imgUrl: this.baseUrl + res.course_time_table.audio_img, // 分享图标
            };
            this.onloadVideo(audioList);
            this.$store.dispatch("app/setAppTitle", res.course_time_table.name);
          }
        });
    },
    noteAjaxMethod() {
      this.$http.post(this.$API.GET_CURRICULUM_NOTE, this.query).then((res) => {
        console.log("res", res);
        if (res.code == 1) {
          let list = Array.isArray(res.data.list) ? res.data.list : [];
          let isOver = list.length < this.query.pageSize ? true : false;
          this.finished = isOver;
          this.loading = false;
          this.isLoading = false;
          this.listData =
            this.query.pageIndex == 1 ? list : [...this.listData, ...list];
          this.total = res.data.total;
          if (!isOver) {
            this.query.pageIndex++;
          }
        }
      });
    },
    likeAjaxMethod() {
      this.$http
        .post(this.$API.GET_CURRICULUM_LIKESLIST, {
          kb_id: this.kb_id,
          course_id: this.course_id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.likes = Array.isArray(res.likes) ? res.likes : [];
            this.likes_total = res.likes_total || 0;
          }
        });
    },
    audioSetBs(e){
      this.isShowBs=false;
      this.bsunmber=e;
      this.aplayer.audio.playbackRate = e;
    },  
    submit() {
      if (!this.message || this.message == "") {
        return this.$toast.fail("请填写笔记内容");
      }
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_CURRICULUM_ADDNOTE, {
          content: this.message,
          kb_id: this.kb_id,
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.$toast.success("操作成功");
            this.query.pageIndex = 1;
            this.message = "";
            this.show = false;
            this.noteAjaxMethod();
          }
        });
    },
    wxReadyOkMethod() {
      console.log("js准备好了");
      this.wxReadyOk = true;
    },
    likeMethod(price) {
      if (!this.wxReadyOk) {
        return this.$toast.fail("调起微信支付失败!");
      }
      let that = this;
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(
          this.$API.GET_CURRICULUM_ZS,
          {
            price: price,
            kb_id: this.kb_id,
            course_id: this.course_id,
          },
          {},
          false
        )
        .then((result) => {
          console.log("详情", result);
          toast.clear();
          if (result.code == 1) {
            this.$WX.chooseWXPay({
              timestamp: result.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: result.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: result.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: result.data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
              paySign: result.data.paySign, // 支付签名
              success: function (res) {
                if (res.errMsg == "chooseWXPay:ok") {
                  that.$toast.success("支付成功");
                  that.likeShow = false;
                  setTimeout(() => {
                    that.likeAjaxMethod();
                  }, 1000);
                } else {
                  that.$toast.fail(res.errMsg);
                }
              },
              cancel: function (res) {
                that.$toast.fail("取消支付");
              },
            });
          } else {
            this.$toast.fail(result.msg);
          }
        })
        .catch((err) => {
          console.log("result.msg", err);
          toast.clear();
        });
    },
  },
  destroyed() {
    if(this.aplayer){this.aplayer.destroy();this.aplayer=null};
  },
};
</script>
<style lang="less">
.renew-container {
  
  .curriculum-js {
    font-size: 0.28rem;
    color: #323233;
    line-height: 0.36rem;
    p{
        margin:0;
      }
  }
  .renew-title {
    padding: 0.24rem 1.8rem 0.2rem 0.3rem;
    position: relative;
    background: #fff;
    .title {
      font-size: 0.3rem;
      color: #333;
      font-weight: bold;
      line-height: 0.42rem;
    }
    .play-num {
      position: absolute;
      top: 50%;
      right: 0.3rem;
      display: flex;
      align-items: center;
      transform: translateY(-50%);
    }
    .play-num-text {
      font-size: 0.24rem;
      color: #888;
      padding-left: 0.08rem;
    }
  }
  .renew-banner {
    font-size: 0;
    background: #fff;
    padding-bottom:0.1rem;
    img {
      width: 100%;
      height: auto;
    }
  }
  .tab-group {
    background: #fff;
    .van-tab {
      padding: 0 0.08rem;
      font-size: 0.3rem;
      line-height: 0.36rem;
    }
  }
  .tab-related {
    padding: 0.3rem 0;
    background: #fff;
    .tab-related-index-data {
      margin-bottom: 0.16rem;
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 0.2rem 0.3rem;
    }
    .tab-related-index-data-lef {
      padding-top: 0.1rem;
      padding-right: 0.2rem;
      text-align: right;
      font-size: 0;
      img {
        width: 0.7rem;
        height: auto;
        border-radius: 50%;
      }
    }
    .tab-related-index-data-rig {
      flex: 1;
    }
    .tab-related-index-data-rig-top {
      width: 100%;
      font-size: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .time {
        float: right;
        font-size: 0.24rem;
        color: #929292;
      }
      .name {
        font-size: 0.28rem;
        color: #222;
      }
    }
    .tab-related-index-data-rig-dow {
      margin-top: 0.24rem;
      font-size: 0.28rem;
      line-height: 0.36rem;
      color: #929292;
    }
  }
  .curriculum-info {
    padding: 0.2rem;
    background: #fff;
    .curriculum-details {
      // box-shadow: 0px 2px 8px 3px rgba(235, 235, 235, 0.4);
      // padding: 0.5rem 0.1rem 0.2rem 0.1rem;
      // border-radius: 6px;

      position: relative;
    }
    .curriculum-info-title {
      height: 0.5rem;
      // background: url("../../assets/img/shuoming.png") center no-repeat;
      background-size: auto 0.5rem;
      line-height: 0.5rem;
      font-size: 0.24rem;
      color: #666;
      text-align: center;
      // position: absolute;
      // top: -0.12rem;
      // left: 0;
      // width: 100%;
      position: relative;
      &:after {
        content: "";
        top: 50%;
        left: 0;
        z-index: 1;
        height: 1px;
        background: #eee;
        width: 36%;
        transform: translateY(-50%);
        position: absolute;
      }
      &::before {
        content: "";
        top: 50%;
        right: 0;
        z-index: 1;
        height: 1px;
        background: #eee;
        width: 36%;
        transform: translateY(-50%);
        position: absolute;
      }
    }
    .curriculum-like-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 0;
      img:not(:first-child) {
        margin-left: -0.2rem;
      }
      img {
        width: 0.7rem;
        height: 0.7rem;
        object-fit: cover;
        margin-top: 0.1rem;
        border-radius: 50%;
      }
      span {
        font-size: 0.6rem;
        color: #888;
        font-weight: bold;
      }
    }
  }
  .van-popup {
    overflow-y: unset;
    background: transparent;
  }
  .reward-model-group {
    .reward-title {
      height: 2.8rem;
      background: #f95400;
      position: relative;
      border-radius: 0.16rem 0.16rem 0 0;
      padding-top: 17%;
    }
    .reward-title-img {
      background-color: #eee;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 50%;
      display: inline-block;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
    .reward-title-name {
      text-align: center;
      font-size: 0.32rem;
      color: #fff;
    }
    .reward-title-info {
      padding-top: 0.2rem;
      text-align: center;
      font-size: 0.28rem;
      color: rgba(255, 255, 255, 0.6);
    }
    .reward-contents {
      padding: 0.2rem 0.3rem;
    }
    .reward-content-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .reward-content-item {
      width: 33.33%;
      padding: 0.12rem;
      display: inline-block;
    }
    .reward-content-bar {
      height: 0.82rem;
      line-height: 0.82rem;
      border-radius: 0.82rem;
      text-align: center;
      border: 1px solid #f95400;
      font-size: 0.32rem;
      width: 100%;
      display: inline-block;
      background: transparent;
    }
    .reward-contents {
      background: #fff;
    }
  }
  .like-button-group {
    position: absolute;
    top: 60%;
    right: 0.1rem;
    width: 0.9rem;
    height: 1.1rem;
    border-radius: 4px;
    background: url("../../assets/img/zan.png") center 0.05rem no-repeat;
    background-size: 0.6rem 0.6rem;
    z-index: 20;
    padding-top: 0.7rem;
    font-size: 0.2rem;
    color: #333;
    text-align: center;
    // box-shadow: 1px 1px 4px -2px #000;
  }
  .bi-model-input {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    .van-cell {
      padding: 0.1rem;
    }
    .van-field__control {
      background: #eee;
      height: 33px;
    }
    .van-button {
      background: #eee;
      color: #666;
    }
  }
  .curriculum-lists {
    .van-cell {
      padding: 0.2rem 0.32rem;
      font-size: 0.28rem;
      line-height: 0.48rem;
      display: flex;
      align-items: center;
    }
    .van-cell__title {
      display: flex;
      align-items: center;
      .van-tag {
        padding: 0 0.08rem;
        font-size: 0.24rem;
        height: 0.4rem;
        white-space: nowrap;
        margin-right: 0.1rem;
        &::after {
          content: "";
          border-style: solid;
          border-width: 6px;
          border-color: transparent transparent transparent #1dc134;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(98%, -50%);
          z-index: 1;
        }
      }
      .custom-title {
        padding-left: 0.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.28rem;
        line-height: 0.32rem;
        color: #323233;
        white-space: nowrap;
        max-width: 5rem;
      }
    }
  }
  .aplayer-content{
    position: relative;
    .aplayer-bs{
      width: 17px;
      height: 12px;
      border:1px solid #666;
      text-align: center;
      line-height: 10px;
      font-size: 7px;
      position: absolute;
      color:#666;
      z-index: 20;
      top:11px;
      right:12px;
    }
    .aplayer-bs-top{
      position: absolute;
      top:0;
      left:50%;
      width: 28px;
      transform: translate(-50%,-102%);
     border-radius: 14px;
      z-index: 80;
      background: #fff;
      padding:10px 0;
      box-shadow: 1px 1px 4px -3px #000;
      .aplayer-bs-list{
        font-size: 11px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color:#666;
      }
      .aplayer-bs-list-active{
        color:#f95400;
      }
    }
  }
  .aplayer {
    border-radius: 20px;
    background: #eee;
    margin: 6px 5px 5px 5px;
    overflow: unset;
    .aplayer-info {
      height: 36px;
      padding: 12px 30px 0 10px;
      margin-left: 36px;
    }
    .aplayer-time {
      margin-top: 2px;
      color: #333;
    }
    .aplayer-music {
      display: none;
    }
    .aplayer-pic {
      width: 36px;
      height: 36px;
      background: transparent !important;
    }
    .aplayer-bar {
      height: 4px !important;
    }
    .aplayer-played{
      height: 4px !important;
    }
    .aplayer-loaded {
      height: 4px !important;
      background: #888;
    }
    .aplayer-pause {
      width: 26px !important;
      height: 26px !important;
      bottom: 3px !important;
      right: 3px !important;
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>